import React, { useEffect, useState } from 'react';
import './Home.scss'
import { DatePicker, Calendar, Alert, Badge } from 'antd';
import * as service from '../../../api/home'
import * as echarts1 from 'echarts';
import type { DatePickerProps, BadgeProps } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom'
import { WindowsOutlined } from '@ant-design/icons';
interface Props {

}
function Home(props: Props) {

    //日期
    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    let Navigate = useNavigate()
    let tiaozhuan = [
        { key: '/index/personnel', text: '人员管理' },
        { key: '/index/salaryFile', text: '人员工资' },
        { key: '/index/Salaryproject', text: '薪资项目' },
        { key: '/index/Salaryscheme', text: '薪资方案' },
        { key: '/index/payroll', text: '工资发放' },
        { key: '/index/user', text: '用户管理' },
        { key: '/index/Payrollledger', text: '薪资台账' },
        { key: '/index/SocialSecurity', text: '社保方案' },
        { key: '/index/AccumulationFund', text: '公积金方案' }
    ]
    let torouter = (key:string) => {
        Navigate(key)
    }
    //日历
    const [value, setValue] = useState(() => dayjs('2017-01-25'));
    const [selectedValue, setSelectedValue] = useState(() => dayjs('2017-01-25'));
    const onSelect = (newValue: Dayjs) => {
        setValue(newValue);
        setSelectedValue(newValue);
    };
    const onPanelChange = (newValue: Dayjs) => {
        setValue(newValue);
    };
    const getListData = (value: Dayjs) => {
        let listData;
        switch (value.date()) {
            case 29:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十八' },

                ];
                break;
            case 30:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十九' },
                ];
                break;
            case 31:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十九' },
                ];
                break;
            case 1:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '二十' },
                ];
                break;
            case 2:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '甘一' },
                ];
                break;
            case 3:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '甘二' },
                ];
                break;
            case 4:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '甘三' },
                ];
                break;
            case 5:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '甘四' },
                ];
                break;
            case 6:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '甘五' },
                ];
                break;
            case 7:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '甘六' },
                ];
                break;
            case 8:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '甘七' },
                ];
                break;
            case 9:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '甘八' },
                ];
                break;
            case 10:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '甘九' },
                ];
                break;
            case 11:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '三十' },
                ];
                break;
            case 12:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '初一' },
                ];
                break;
            case 13:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '初二' },
                ];
                break;
            case 14:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '初三' },
                ];
                break;
            case 15:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '初四' },
                ];
                break;
            case 16:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '初五' },
                ];
                break;
            case 17:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '初六' },
                ];
                break;
            case 18:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '初七' },
                ];
                break;
            case 19:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '初八' },
                ];
                break;
            case 20:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '初九' },
                ];
                break;
            case 21:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '初十' },
                ];
                break;
            case 22:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十一' },
                ];
                break;
            case 23:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十二' },
                ];
                break;
            case 24:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十三' },
                ];
                break;
            case 25:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十四' },
                ];
                break;
            case 26:
                listData = [
                    { type: 'warning', content: '工作日' },
                    { type: 'success', content: '十五' },
                ];
                break;
            case 27:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '十六' },
                ];
                break;
            case 28:
                listData = [
                    { type: 'warning', content: '休' },
                    { type: 'success', content: '十七' },
                ];
                break;


            default:
        }
        return listData || [];
    };
    const dateCellRender = (value: Dayjs) => {
        const listData = getListData(value);
        return (
            <ul className="events">
                {listData.map((item) => (
                    <li key={item.content}>
                        <Badge status={item.type as BadgeProps['status']} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    };
    let myChart: any = null

    let bar: any = []

    //定义存储上面列表变量
    let [home, setHome] = useState([])

    //定义存储下面列表变量
    let [home1, setHome1] = useState([])

    //获取上面列表数据
    let huoqu = async () => {
        let res: any = await service.home_list()
        setHome(res.data.data)
    }

    //获取下面列表数据
    let huoqu1 = async () => {
        let res: any = await service.home2_list2()
        setHome1(res.data.data)
    }

    //获取echarts数据
    let echartsData = async () => {
        let res: any = await service.echarts_list()
        echarts(res)
    }

    //echarts
    let echarts = (res: any) => {
        myChart = echarts1.init(document.getElementById('echarts') || document.body);
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['项目部', '财务部', '人事部', '技术部', '设计部', '产品部', '行政部']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: JSON.parse(res.data.data[0]?.bar1),
                    type: 'bar'
                },
                {
                    data: JSON.parse(res.data.data[0]?.bar2),
                    type: 'bar'
                },
                {
                    data: JSON.parse(res.data.data[0]?.line),
                    type: 'line'
                }
            ]
        });
    }

    //挂载期
    useEffect(() => {
        echartsData()
        huoqu()
        huoqu1()
    }, [])

    return (
        <div className='home'>
            <div className='riqi' >
                <DatePicker onChange={onChange} />
            </div>
            <div className="top">
                {
                    home?.map((item: any, index) => {
                        return (
                            <div className="item" key={index}>
                                <div className="title">
                                    {item.title}
                                </div>
                                <h2>{item.price}</h2>
                                <div className='bottom'>
                                    较上个月 &nbsp;<span className='right'>+12.06%</span>&nbsp; 同比&nbsp; <span className='green'>-10.15%</span>
                                </div>
                            </div>
                        )
                    })
                }
            </div>

            <div className="zhong">
                <div className="rili">
                    <Alert message={`当前时间是: ${selectedValue?.format('YYYY-MM-DD')}`} />
                    <Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} dateCellRender={dateCellRender} />
                </div>
                <div className="you">
                    <section>
                        <div className="shang">
                            <div className="zuo">
                                24
                            </div>
                            <div className="you">
                                <p>星期五</p>
                                <p>农历正月十五</p>
                            </div>
                        </div>
                        <div className="xia">
                            我们应该担心的不是衰老，而是生锈的人生，我们的目标不是拥有一切，而是能够充实地生活。
                        </div>
                    </section>
                    <div className="kuaisu">
                        <div className="shangmian">
                            快速入口
                        </div>
                        <div className="rukou">
                            {
                                tiaozhuan.map((item, index) => {
                                    return (
                                        <div className="item" key={index} onClick={() => { torouter(item.key) }} style={{cursor:'pointer'}}>
                                            <WindowsOutlined />
                                            {item.text}
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
            <>
                <div id='echarts'>
                </div>
                <div className="bottom">
                    {
                        home1?.map((item: any, index) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="title">
                                        {item.title}
                                    </div>
                                    <h2>{item.price}</h2>
                                    <div className='bottom1'>
                                        较上月&nbsp; &nbsp;<span className='right'>{item.relatively}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </>
        </div>
    );
}

export default Home;